<template>
  <el-header
    class="bg-white shadow-sm px-4 sm:px-6 lg:px-8 flex items-center justify-between"
  >
    <!-- 网站标题 -->
    <div class="flex items-center">
      <router-link
        to="/courses"
        class="text-xl font-semibold text-blue-600 flex items-center"
      >
        <el-icon class="w-6 h-6 mr-2"><Document /></el-icon>
        <span>课程学习平台</span>
      </router-link>
    </div>

    <!-- 导航菜单 -->
    <el-menu
      :default-active="$route.path"
      class="hidden md:flex items-center"
      mode="horizontal"
      router
      text-color="#606266"
      active-text-color="#409eff"
    >
      <template v-for="link in links" :key="link.path">
        <el-menu-item 
          v-if="!link.isExternal" 
          :index="link.path"
        >
          {{ link.name }}
        </el-menu-item>
        <el-menu-item 
          v-else 
          @click="openExternalLink(link.path)"
          :index="link.path"
          style="cursor: pointer;"
        >
          {{ link.name }}
        </el-menu-item>
      </template>
    </el-menu>

    <!-- 用户区域 - 右上角 -->
    <div class="flex items-center space-x-4">
      <el-button
        v-if="!auth.isLoggedIn"
        @click="$router.push('/login')"
        type="primary"
        size="small"
        round
      >
        登录
      </el-button>
      <el-dropdown v-else>
        <span class="flex items-center space-x-2 cursor-pointer">
          <el-avatar :size="40">
            <span class="text-blue-600 font-medium">{{
              auth.user?.username?.charAt(0)
            }}</span>
          </el-avatar>
          <span class="text-gray-700 font-medium">{{
            auth.user?.username
          }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="auth.logout()" divided>
              <el-icon><ArrowRight /></el-icon>
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import { computed } from "vue";
import { useAuthStore } from "../store/auth";
import { Document, ArrowRight } from "@element-plus/icons-vue";

const auth = useAuthStore();

// 打开外部链接
const openExternalLink = (url) => {
  window.open(url, '_blank', 'noopener,noreferrer');
};

const links = computed(() => {
  const baseLinks = [
    { name: "课程列表", path: "/courses" },
    { name: "代码仓库", path: "https://gitee.com/unlucky-to-death/learning-website.git", isExternal: true }
  ];

  // 登录后显示的链接
  if (auth.isLoggedIn) {
    baseLinks.push(
      // { name: '添加课程类别', path: '/add-category' },
      { name: "添加课程", path: "/add-course" }
      // { name: "添加课程任务", path: "/add-task" }
    );
  }

  return baseLinks;
});
</script>

<style scoped>
:deep(.el-header) {
  padding: 0 !important;
  line-height: 48px;
  height: 64px !important;
  display: flex;
  align-items: center;
}

:deep(.el-menu) {
  border-bottom: none !important;
  flex: 1;
  justify-content: center;
}

:deep(.el-menu--horizontal) {
  height: 100%;
  line-height: 64px;
}

:deep(.el-menu-item) {
  height: 64px !important;
  line-height: 64px !important;
}

:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
  background-color: rgba(240, 242, 245, 0.8);
}

:deep(.el-avatar) {
  background-color: #ecf5ff;
  border: 2px solid #dcdfe6;
}

:deep(.el-dropdown-menu__item) {
  padding: 12px 20px !important;
}
</style>